<template>
  <div>
    <swiper
      :loop="true"
      slidesPerView="auto"
      :autoplay="{
        delay: 3000, // 自动轮播间隔时间，单位为毫秒
        disableOnInteraction: false, // 用户操作后是否停止自动轮播
      }"
      :pagination="{
        clickable: true,
      }"
      :modules="modules"
      class="view-box-context"
    >
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img class="img" :src="item.picUrl" alt="" />
      </swiper-slide>
    </swiper>
    <div v-if="compInfo.textNav" class="narration">{{compInfo.textNav}}</div>
  </div>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";
import "swiper/css/bundle";
import { language } from "~/conf";
type bannerObj = {
  picUrl: string;
  url: string;
};
const props = defineProps<{
  compInfo: Record<string, string>;
}>();
const { nav } = language;
const modules = [Autoplay, Pagination];
const swiperList = ref<bannerObj[]>([]);

const init = async () => {
  const { data } = await useServerFetch<bannerObj>("/app-api/promotion/banner/list", {
    method: "get",
    query: {
      position: 2,
    },
  });
  swiperList.value = data;
};
init();
</script>

<style lang="stylus" scoped>
.view-box-context{
  width 100%
  .img{
    width 100%
  }
}
.narration{
  height: 49px;
  background:#3B3A39;
  text-align:center;
  font-family: Source Han Sans CN;
  font-weight: 300;
  font-size: 16px;
  color: #FFFFFF;
  line-height 49px
}
</style>
